<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
  <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
  <title>播放rtsp</title>
  <style type="text/css">
    canvas,img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<!-- <canvas id="canvas" style="width: 960px; height: 540px;"></canvas> -->
<canvas id="videoCanvas" style="display:none;"></canvas>
<!-- <canvas id="imageCanvas" style=""></canvas> -->
<img id="imageCanvas" src="error.jpg" alt="">
</body>
<script>
  var urlParams = new URLSearchParams(window.location.search);
  var rtsp = decodeURIComponent(urlParams.get('rtspUrl'));
  console.log('aqie', rtsp)

  window.onload = () => {
      

    // location为node服务所在的服务地址，端口为rtsp2web设置的端口（也就是index.js中配置的端口）
    new JSMpeg.Player("ws://192.168.20.149:10012/rtsp?url="+btoa(rtsp)+"&-s=1080x720&-b:v=512k&scale=640:-1", {
      canvas: document.getElementById("videoCanvas"),
      loop:true,
      autoplay:true,
      audio:false,
      video:true,
      poster:"/src/assets/error.gif",
      //  disable WebGL and always use the Canvas2D renderer
      disableGl:false,
      disableWebAssembly:true,
      pauseWhenHidden:true,
      // 捕获截图或生成缩略图
      preserveDrawingBuffer:false,
      // playback can begin before 
      progressive:true,
      videoBufferSize:256*1024,
      audioBufferSize:128*1024,
      onPlay: function() {
      // 视频播放成功
      console.log('play success')
      document.getElementById("imageCanvas").style.display = "none";
      document.getElementById("videoCanvas").style.display = "block";
      },
      onPause: function() {
               console.log('play pause')
      // 视频暂停
      // 视频播放失败
        document.getElementById("imageCanvas").style.display = "block";
      document.getElementById("videoCanvas").style.display = "none";

      },
      onEnded: function() {
      // 视频播放结束
       console.log('play end')
       document.getElementById("imageCanvas").style.display = "block";
      document.getElementById("videoCanvas").style.display = "none";
      },
      onError: function() {
      console.log('play error')
      // 视频播放失败
      document.getElementById("imageCanvas").style.display = "block";
      document.getElementById("videoCanvas").style.display = "none";
      }
    });
  }
</script>
</html>
